<template>
    <div class="loginPage">
        <!-- <div class="title">登录</div> -->
        <div class="phoneLogin">手机号登录</div>
        <div class="content">
            <van-cell-group :border="false">
                <div class="userLogin" v-show="type === 'userLogin'">
                    <div class="input-container">
                         <van-field
                            v-model="username"
                            clearable
                            :border="false"
                            placeholder="请输入手机号码"
                        >
                        <!-- <span slot="left-icon" @click="popShow1 = true" class="mobileArea"><i>+{{mobileArea1}}</i><van-icon name="arrow-down "></van-icon></span> -->
                        </van-field>
                    </div>
                    <div class="input-container">
                         <van-field
                            v-model="password"
                            type="password"
                            :border="false"
                            clearable
                            placeholder="请输入密码"
                        />
                        <button class="findPwd" @click="$router.push('/forget')">忘记密码</button>
                    </div>
                </div>


                <div class="userLogin" v-show="type === 'phoneLogin'">
                    <div class="input-container">
                        <van-field
                            v-model="phone"
                            clearable
                            :border="false"
                            placeholder="请输入手机号码"
                        >
                        <!-- <span slot="left-icon" @click="popShow2 = true" class="mobileArea"><i>+{{mobileArea2}}</i><van-icon name="arrow-down "></van-icon></span> -->
                        </van-field>
                    </div>
                    <div class="input-container">
                         <van-field
                            v-model="verifyCode"
                            type="text"
                            clearable
                            :border="false"
                            placeholder="请输入验证码"
                        />
                        <button class="sendSms" @click="sendSms">{{btnText}}</button>
                    </div>
                </div>
            </van-cell-group>
            <div class="quick-nav">
                <span v-if="type === 'userLogin'" @click="type = 'phoneLogin'">短信验证码登录 &gt;</span>
                <span v-if="type === 'phoneLogin'" @click="type = 'userLogin'">用账号密码登录 &gt;</span>
                <span @click="$router.push('/regist')">还没有账号？</span>
            </div>
            <div class="notice"></div>            
            <van-button round type="primary" :disabled="disabled" @click="login">登&nbsp;录</van-button>
            <!-- <van-button round type="primary" @click="login">登&nbsp;录</van-button> -->
            <!-- <van-button round type="primary" @click="goIndex" style="margin-top:15px;">回到首页</van-button> -->
            <div class="argumentxt">已阅读并同意《小米商城用户协议》《小米商城隐私政策》《帐号用户协议》《小米帐号隐私政策》</div>
        </div>

        <van-popup position="bottom" v-model="popShow1">
            <van-picker :columns="mobileAreaList"  @cancel="popShow1 = false"  show-toolbar @confirm="areaChange1"></van-picker>
        </van-popup>
         <van-popup position="bottom" v-model="popShow2">
            <van-picker :columns="mobileAreaList"  @cancel="popShow2 = false" show-toolbar @confirm="areaChange2"></van-picker>
        </van-popup>
    </div>
</template>

<script>
import md5 from 'js-md5';
export default {
    name: 'loginPage',
    data() {
        return {
            mobileArea1: '86',
            username: '',
            password: '',

            mobileArea2: '86',
            phone: '',
            verifyCode: '',

            popShow1: false,
            popShow2: false,

            time: 60,
            mobileAreaList: [{
                text: '中国 +86',
                value: '86'
            }],

            btnText: '获取验证码',
            // type: 'userLogin',
            type: 'phoneLogin'
        }
    },

    methods: {
        areaChange1(self) {
            this.mobileArea1 = self.value;
            this.popShow1 = false;
        },

        areaChange2(self) {
            this.mobileArea2 = self.value;
            this.popShow2 = false;
        },

        count() {
            let timer = setInterval(() => {
                this.time--;
                if (this.time <= 0) {
                    clearInterval(timer);
                    this.time = 60;
                    this.btnText = '获取验证码';
                    return;
                }
                this.btnText = `${this.time}秒`
            }, 1000)
        },

        sendSms() {
            if (this.time != 60) {return;}
            if (this.phone === '') {
                this.$toast('请输入手机号码');
                return;
            }
            this.$http.post('/msg/verifyCode/front/getVerifyCode', {
                mobileArea: this.mobileArea2,
                mobile: this.phone,
                templateKey: 20,
            }).then(res => {
                if (res.status === 0) {
                    this.$toast.success('发送成功');
                    this.count(); //开始倒计时
                } else {
                     this.$toast.fail(res.message);
                }
            })
        },

        login() {
            if (this.type === 'userLogin') {
                this.userLogin();
            } else {
                this.phoneLogin();
            }
        },

        goIndex() {
            this.$router.push({ path:'/'})
        },

        userLogin() {
            this.$http.post('/user/auth/front/login', {
                userName: `${this.mobileArea1}${this.username}`,
                userPwd: md5(this.password)
            }).then(res => {
                if (res.status === 0) {
                    this.$toast.success('登录成功');
                    this.$store.commit('clearUserInfo', res.data);
                    localStorage.setItem('token', res.data.token);                    
                    this.$store.commit('updateUserInfo', res.data);
                    setTimeout(() => {
                        this.$router.back();
                    }, 700)
                } else {
                    this.$toast.fail(res.message);
                }
            })
        },

        phoneLogin() {
            this.$http.post('/user/auth/front/smsLogin', {
                mobile: this.phone,
                mobileArea: this.mobileArea2,
                verifyCode: this.verifyCode
            }).then(res => {
                if (res.status === 0) {
                    this.$toast.success('登录成功');
                    setTimeout(() => {
                        this.$store.commit('clearUserInfo', res.data);
                        localStorage.setItem('token', res.data.token);
                        // this.$router.replace('/index');
                        this.$router.back();
                        this.$store.commit('updateUserInfo', res.data);
                    }, 700)
                } else {
                    this.$toast.fail(res.message);
                }
            })
        }
    },
    computed: {
        disabled() {
            if (this.type === 'userLogin') {
                return !(this.username !== '' && this.password !== '');
            } else if (this.type === 'phoneLogin') {
                return !(this.phone !== '' && this.code !== '');
            }
            return false;
        }
    },

    mounted() {
    }
}
</script>

<style scoped lang="scss">
    /deep/ .van-button--primary{
        background: #ff6700;
        border: 1px solid #ff6700;
    }
    .argumentxt{
        color: #c1c1c1;
        font-size: 12px;
        padding: 20px 0;
    }

    .loginPage {
        width: 100%;
        height: 100%;
        background-color: #fff;
        // padding-top: 46px;
        // padding-top: 20px;
    }

    .title {
        height: 46px;
        background-color: #fff;
        position: fixed;
        text-align: center;
        top: 0;
        font-size: 16px;
        line-height: 46px;
        width: 100%;
        box-shadow: 0 0 2px 0px rgba(0,0,0,.1);
    }

    .phoneLogin{
        color: #333333;
        font-size: 18px;
        padding: 50px 35px 20px 35px;
        font-weight: bold;
    }

    .content {
        padding: 0 20px;
        .input-container {
            margin-top: 10px;
            padding: 3px 0;
            border-bottom: 1px solid #efefef;
            display: flex;
            align-items: center;
            /deep/ .van-field {
                flex: 1;
            }

            .mobileArea {
                display: flex;
                align-items: center;
                padding: 0 10px;
                i {
                    margin-right: 3px;
                }
            }

            button {
                color: #222;
                font-size: 14px;
                border: 0;
                outline: 0;
                border-radius: 2px;
                text-align: center;
                // border-left: 1px solid #ccc;
                -webkit-box-shadow: none;
                box-shadow: none;
                height: 34px;
                line-height: 34px;
                background-color: #fff;
                &.sendSms {
                    width: 100px;
                    text-align: center;
                    color: #555555;
                }
                &.findPwd {
                    padding-left: 16px;
                    padding-right: 5px;
                    
                }
            }
        }
        .notice {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
        /deep/ .van-button {
            width: 100%;
        }

        .quick-nav {
            // margin-top: 20px;
            display: flex;
            justify-content: space-between;
            color: #555555;
            padding: 10px 15px;
        }
    }
</style>
